<template>
    <div class="restaurantTable">
        <el-row>
            <el-col :span="3" style="text-align: left">
                <el-button type="primary" size="medium" @click="centerDialogVisiblew = true" >新增</el-button>
            </el-col>
            <el-col :span="4" :offset="15">
                <el-input
                    size="medium"
                    placeholder="请输入餐桌号"
                    v-model="inputId">
            </el-input>
            </el-col>
            <el-col :span="2" style="text-align: right">
                <el-button type="primary" size="medium" icon="el-icon-search" @click="selectTable">搜索</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" style="min-height: 336px">
                <el-table
                        :header-cell-style="this.$store.state.headerCssObj"
                        :cell-style="this.$store.state.cellCssObj"
                        :data="currentData"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="number"
                            label="餐桌号">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="餐桌类型">
                    </el-table-column>
                    <el-table-column
                            prop="peopleNum"
                            label="座位数">
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="updateTableFun(scope.row,scope.$index)">修改</el-button>
                            <el-button type="danger" size="mini"  @click="deleteTableFun(scope.row,scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <div class="pages">
                    <paging :obj = 'pagingData'></paging>
                </div>
            </el-col>
        </el-row>
        <el-dialog
                title="修改餐桌信息"
                :visible.sync="centerDialogVisibles"
                width="30%"
                :close-on-click-modal = 'false'
                center>
            <div><span>餐桌号：</span><el-input v-model="tableId" :disabled="true"></el-input></div>

            <div><span>餐桌类型：</span><diySelect :optionData="tableType" size="medium" @choose="choose"  :propsValue="selectValue"  style="width: 60%"></diySelect></div>

            <div><span>座位数：</span><el-input v-model="peopleNum"></el-input></div>
            <span slot="footer" class="dialog-footer">
                   <el-button @click="centerDialogVisibles = false">取 消</el-button>
                   <el-button type="primary" @click="updateTableConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="新增餐桌信息"
                :visible.sync="centerDialogVisiblew"
                width="30%"
                :close-on-click-modal = 'false'
                center>
            <div><span>餐桌类型：</span><diySelect :optionData="tableType"  :propsValue="selectValue" size="medium" @choose="choose" style="width: 60%"></diySelect></div>
            <div><span>座位数：</span><el-input v-model="peopleNum"></el-input></div>
            <span slot="footer" class="dialog-footer">
                   <el-button @click="centerDialogVisiblew = false">取 消</el-button>
                   <el-button type="primary" @click="addTableConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="删除信息提示"
                :visible.sync="centerDialogVisibled"
                width="30%"
                :close-on-click-modal = 'false'
                center>
            <span class="message">确定要删除餐桌{{tableId}}？</span>
            <span slot="footer" class="dialog-footer">
                   <el-button @click="centerDialogVisibled = false">取 消</el-button>
                   <el-button type="primary" @click="deleteTableConfirm">确 定</el-button>
               </span>
        </el-dialog>
    </div>
</template>

<script>
    import diySelect from '../../components/publicCom/diySelect'
    import {mapActions} from 'vuex'
    export default {
        name: "restaurantTablePage",
        components:{diySelect},
        data(){
            return{
                inputId:'',
                tableId:'',
                tableIndex:'',
                tableType:[
                    {value:'包间', label:'包间'},
                    {value:'大圆桌', label:'大圆桌'},
                    {value:'小圆桌', label:'小圆桌'},
                    {value:'方桌', label:'方桌'},
                ],
                peopleNum:'',
                pageData:[],
                currentPage:1,
                pageNums:2,
                selectValue:'',
                operation: {userName:this.$store.state.user.userName, operationDate:'', operationMessage:''},
                centerDialogVisibles:false,
                centerDialogVisiblew:false,
                centerDialogVisibled:false,
            }
        },
        computed:{
            currentData(){
                return this.pageData
            },
            pagingData(){
                var that = this;
                let data = {
                    pageSize:5,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    currentChange(num){
                        that.currentPage = num//改变当前页
                        let obj ={
                            currentPage:that.currentPage,
                            pageSize:5
                        }
                        that.selectTablePage(obj)
                            .then(resp=>{
                                if(resp.Code === 200){
                                    that.pageData = resp.TableList
                                    that.pageNums = resp.PageCount
                                }
                            })
                            .catch(err=>{
                                console.log(err)
                            })
                    },
                    pageCount:that.pageNums,//一共多少页
                }
                return data
            }
        },
        methods:{
            ...mapActions(['selectTableStore','addTableStore','updateTableStore','deleteTableStore','selectTablePage','userOperation']),
            choose(val){
                this.selectValue = val   //获取选项值
            },
            selectTable(){
                if(this.inputId ===''){
                    this.$message.error('餐桌号不能为空！')
                }else {
                    let obj = {
                        searchName:this.inputId,
                        currentPage:1,
                        pageSize:5,
                    }
                    this.selectTableStore(obj)
                        .then(resp=>{
                            if(resp.Code === 200 && resp.TableList.length >=1){
                                this.pageData = resp.TableList
                                this.pageNums = resp.PageCount
                                this.operation.operationMessage = '查询餐桌'
                                this.operation.operationDate = this.$store.state.nowTime.time
                                this.userOperation(this.operation)
                            }else if(resp.Code === 400 || resp.TableList.length === 0){
                                this.$message.error('查询失败！');
                            }
                        })
                        .catch(err=>{
                            console.log(err)
                        })
                }
            },
            addTableConfirm(){
                if(this.peopleNum === ''&& this.selectValue === ''){
                    this.$message.error('餐桌人数或餐桌类型不能为空！')
                }else {
                    let obj = {
                        peopleNum:this.peopleNum,
                        type:this.selectValue,
                    }
                    this.addTableStore(obj)
                        .then(resp=>{
                            if(resp.Code === 200){
                                let obj = {
                                    currentPage:1,
                                    pageSize:5,
                                }
                                this.selectTablePage(obj)
                                    .then(resp=>{
                                        if(resp.Code === 200){
                                            this.pageData = resp.TableList
                                            this.pageNums = resp.PageCount
                                        }
                                    })
                                    .catch(err=>{
                                        console.log(err)
                                    })
                                this.$message.success({message: '添加成功！'})
                                this.operation.operationMessage = '添加餐桌'
                                this.operation.operationDate = this.$store.state.nowTime.time
                                this.userOperation(this.operation)
                            }else if(resp.Code === 400){
                                this.$message.error('添加失败！');
                            }
                        })
                        .catch(err=>{
                            console.log(err)
                        })
                    this.centerDialogVisiblew = false
                }
            },
            updateTableFun(obj,index){
                this.centerDialogVisibles = true
                this.tableId = obj.number
                this.peopleNum = obj.peopleNum
                this.tableIndex = index
            },
            updateTableConfirm(){
                if(this.peopleNum === ''&& this.selectValue === ''){
                    this.$message.error('餐桌人数或餐桌类型不能为空！')
                }else {
                    let obj = {
                        number:this.tableId,
                        peopleNum:this.peopleNum,
                        type:this.selectValue,
                    }
                    this.updateTableStore(obj)
                        .then(resp=>{
                            if(resp.Code === 200){
                                this.$message.success({message: '修改成功！'});
                                this.pageData.splice(this.tableIndex,1,obj)
                                this.operation.operationMessage = '修改餐桌' + this.tableId
                                this.operation.operationDate = this.$store.state.nowTime.time
                                this.userOperation(this.operation)
                            }else if(resp.Code === 400){
                                this.$message.error('修改失败！');
                            }
                        })
                        .catch(err=>{
                            console.log(err)
                        })
                }
                this.centerDialogVisibles = false
            },
            deleteTableFun(obj,index){
                this.centerDialogVisibled = true
                this.tableId = obj.number
                this.tableIndex = index
            },
            deleteTableConfirm(){
                let obj = {
                    number:this.tableId
                }
                this.deleteTableStore(obj)
                    .then(resp=>{
                        if(resp.Code === 200){
                            this.$message.success({message: '删除成功！'});
                            this.pageData.splice(this.tableIndex,1)
                            if(this.pageData.length === 0 && this.currentPage !== 1) {
                                this.currentPage = this.currentPage - 1
                                let obj = {
                                    currentPage:this.currentPage,
                                    pageSize:5,
                                }
                                this.selectTablePage(obj)
                                    .then(resp=>{
                                        if(resp.Code === 200){
                                            this.pageData = resp.TableList
                                            this.pageNums = resp.PageCount
                                        }
                                    })
                                    .catch(err=>{
                                        console.log(err)
                                    })
                            }
                            this.operation.operationMessage = '删除餐桌' + this.tableId
                            this.operation.operationDate = this.$store.state.nowTime.time
                            this.userOperation(this.operation)
                        }else if(resp.Code === 400){
                            this.$message.error('删除失败！');
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
                this.centerDialogVisibled = false
            }
        },
        mounted() {
            let obj = {
                currentPage:1,
                pageSize:5,
            }
            this.selectTablePage(obj)
                .then(resp=>{
                    console.log(resp.PageCount)
                    if(resp.Code === 200){
                        this.pageData = resp.TableList
                        this.pageNums = resp.PageCount
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
        }
    }
</script>

<style scoped lang="less">
    .restaurantTable{
        margin-top: 20px;
        .el-row{
            .el-col{
                text-align: center;
                .el-input{
                    margin-left: 10px;
                    width: 80%;
                }
                .pages{
                    margin-top: 20px;
                    text-align: center;
                }
            }
            .el-table{
                margin: 20px auto 0;
            }
        }
        .el-dialog{
            .message{
                display: inline-block;
                text-align: center;
                width: 100%;
            }
            .dialog-footer{
                width: 100%;
            }
            div{
                text-align: center;
                margin: 10px auto;
                span{
                    display: inline-block;
                    text-align: center;
                    width: 20%;
                }
                .el-input{
                    display: inline-block;
                    text-align: center;
                    width: 60%;
                }
            }
        }
    }
</style>